<template>
  <AdminLayout active-menu="system-settings">
    <div class="system-settings-content">
      <div class="content-header">
        <h2>系统设置</h2>
        <p>管理系统配置和参数</p>
      </div>

      <!-- 设置选项卡 -->
      <el-tabs v-model="activeTab" class="settings-tabs">
        <!-- 基本设置 -->
        <el-tab-pane label="基本设置" name="basic">
          <el-card class="settings-card">
            <template #header>
              <span>基本配置</span>
            </template>
            <el-form :model="basicSettings" label-width="120px">
              <el-form-item label="系统名称">
                <el-input v-model="basicSettings.systemName" placeholder="请输入系统名称" />
              </el-form-item>
              <el-form-item label="系统描述">
                <el-input 
                  v-model="basicSettings.systemDesc" 
                  type="textarea" 
                  :rows="3"
                  placeholder="请输入系统描述"
                />
              </el-form-item>
              <el-form-item label="联系邮箱">
                <el-input v-model="basicSettings.contactEmail" placeholder="请输入联系邮箱" />
              </el-form-item>
              <el-form-item label="客服电话">
                <el-input v-model="basicSettings.servicePhone" placeholder="请输入客服电话" />
              </el-form-item>
              <el-form-item label="系统状态">
                <el-switch 
                  v-model="basicSettings.systemStatus" 
                  active-text="正常运行"
                  inactive-text="维护中"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
                <el-button @click="resetBasicSettings">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>

        <!-- 安全设置 -->
        <el-tab-pane label="安全设置" name="security">
          <el-card class="settings-card">
            <template #header>
              <span>安全配置</span>
            </template>
            <el-form :model="securitySettings" label-width="120px">
              <el-form-item label="密码最小长度">
                <el-input-number 
                  v-model="securitySettings.minPasswordLength" 
                  :min="6" 
                  :max="20"
                />
              </el-form-item>
              <el-form-item label="登录失败限制">
                <el-input-number 
                  v-model="securitySettings.maxLoginAttempts" 
                  :min="3" 
                  :max="10"
                />
                <span class="form-tip">次失败后锁定账户</span>
              </el-form-item>
              <el-form-item label="会话超时">
                <el-input-number 
                  v-model="securitySettings.sessionTimeout" 
                  :min="30" 
                  :max="1440"
                />
                <span class="form-tip">分钟</span>
              </el-form-item>
              <el-form-item label="强制HTTPS">
                <el-switch 
                  v-model="securitySettings.forceHttps" 
                  active-text="启用"
                  inactive-text="禁用"
                />
              </el-form-item>
              <el-form-item label="双因子认证">
                <el-switch 
                  v-model="securitySettings.twoFactorAuth" 
                  active-text="启用"
                  inactive-text="禁用"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
                <el-button @click="resetSecuritySettings">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>

        <!-- 邮件设置 -->
        <el-tab-pane label="邮件设置" name="email">
          <el-card class="settings-card">
            <template #header>
              <span>邮件配置</span>
            </template>
            <el-form :model="emailSettings" label-width="120px">
              <el-form-item label="SMTP服务器">
                <el-input v-model="emailSettings.smtpHost" placeholder="请输入SMTP服务器地址" />
              </el-form-item>
              <el-form-item label="SMTP端口">
                <el-input-number v-model="emailSettings.smtpPort" :min="1" :max="65535" />
              </el-form-item>
              <el-form-item label="发送邮箱">
                <el-input v-model="emailSettings.senderEmail" placeholder="请输入发送邮箱" />
              </el-form-item>
              <el-form-item label="邮箱密码">
                <el-input 
                  v-model="emailSettings.senderPassword" 
                  type="password" 
                  placeholder="请输入邮箱密码"
                  show-password
                />
              </el-form-item>
              <el-form-item label="启用SSL">
                <el-switch 
                  v-model="emailSettings.enableSsl" 
                  active-text="启用"
                  inactive-text="禁用"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveEmailSettings">保存设置</el-button>
                <el-button @click="testEmailSettings">测试连接</el-button>
                <el-button @click="resetEmailSettings">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>

        <!-- 系统监控 -->
        <el-tab-pane label="系统监控" name="monitor">
          <el-card class="settings-card">
            <template #header>
              <span>系统状态监控</span>
            </template>
            <div class="monitor-section">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div class="monitor-item">
                    <h4>服务器状态</h4>
                    <el-progress :percentage="serverStatus.cpu" status="success">
                      <span>CPU: {{ serverStatus.cpu }}%</span>
                    </el-progress>
                    <el-progress :percentage="serverStatus.memory" status="warning">
                      <span>内存: {{ serverStatus.memory }}%</span>
                    </el-progress>
                    <el-progress :percentage="serverStatus.disk" status="exception">
                      <span>磁盘: {{ serverStatus.disk }}%</span>
                    </el-progress>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="monitor-item">
                    <h4>系统信息</h4>
                    <el-descriptions :column="1" border>
                      <el-descriptions-item label="系统版本">{{ systemInfo.version }}</el-descriptions-item>
                      <el-descriptions-item label="运行时间">{{ systemInfo.uptime }}</el-descriptions-item>
                      <el-descriptions-item label="在线用户">{{ systemInfo.onlineUsers }}</el-descriptions-item>
                      <el-descriptions-item label="数据库状态">
                        <el-tag :type="systemInfo.dbStatus === 'connected' ? 'success' : 'danger'">
                          {{ systemInfo.dbStatus === 'connected' ? '已连接' : '断开' }}
                        </el-tag>
                      </el-descriptions-item>
                    </el-descriptions>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import AdminLayout from '@/components/layout/AdminLayout.vue'

// 当前激活的选项卡
const activeTab = ref('basic')

// 基本设置
const basicSettings = reactive({
  systemName: 'HousingHub 房屋租赁平台',
  systemDesc: '专业的房屋租赁管理平台，为用户提供便捷的租房服务',
  contactEmail: 'admin@housinghub.com',
  servicePhone: '400-123-4567',
  systemStatus: true
})

// 安全设置
const securitySettings = reactive({
  minPasswordLength: 8,
  maxLoginAttempts: 5,
  sessionTimeout: 120,
  forceHttps: true,
  twoFactorAuth: false
})

// 邮件设置
const emailSettings = reactive({
  smtpHost: 'smtp.qq.com',
  smtpPort: 587,
  senderEmail: 'noreply@housinghub.com',
  senderPassword: '',
  enableSsl: true
})

// 服务器状态
const serverStatus = reactive({
  cpu: 45,
  memory: 68,
  disk: 32
})

// 系统信息
const systemInfo = reactive({
  version: 'v1.0.0',
  uptime: '15天 8小时 32分钟',
  onlineUsers: 1234,
  dbStatus: 'connected'
})

let statusInterval = null

// 保存基本设置
const saveBasicSettings = () => {
  ElMessage.success('基本设置保存成功')
}

// 重置基本设置
const resetBasicSettings = () => {
  Object.assign(basicSettings, {
    systemName: 'HousingHub 房屋租赁平台',
    systemDesc: '专业的房屋租赁管理平台，为用户提供便捷的租房服务',
    contactEmail: 'admin@housinghub.com',
    servicePhone: '400-123-4567',
    systemStatus: true
  })
  ElMessage.info('基本设置已重置')
}

// 保存安全设置
const saveSecuritySettings = () => {
  ElMessage.success('安全设置保存成功')
}

// 重置安全设置
const resetSecuritySettings = () => {
  Object.assign(securitySettings, {
    minPasswordLength: 8,
    maxLoginAttempts: 5,
    sessionTimeout: 120,
    forceHttps: true,
    twoFactorAuth: false
  })
  ElMessage.info('安全设置已重置')
}

// 保存邮件设置
const saveEmailSettings = () => {
  ElMessage.success('邮件设置保存成功')
}

// 测试邮件设置
const testEmailSettings = () => {
  ElMessage.info('正在测试邮件连接...')
  setTimeout(() => {
    ElMessage.success('邮件连接测试成功')
  }, 2000)
}

// 重置邮件设置
const resetEmailSettings = () => {
  Object.assign(emailSettings, {
    smtpHost: 'smtp.qq.com',
    smtpPort: 587,
    senderEmail: 'noreply@housinghub.com',
    senderPassword: '',
    enableSsl: true
  })
  ElMessage.info('邮件设置已重置')
}

// 更新服务器状态
const updateServerStatus = () => {
  serverStatus.cpu = Math.floor(Math.random() * 30) + 30
  serverStatus.memory = Math.floor(Math.random() * 40) + 50
  serverStatus.disk = Math.floor(Math.random() * 20) + 20
}

onMounted(() => {
  // 每5秒更新一次服务器状态
  statusInterval = setInterval(updateServerStatus, 5000)
})

onUnmounted(() => {
  if (statusInterval) {
    clearInterval(statusInterval)
  }
})
</script>

<style scoped>
.system-settings-content {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

.system-settings-content::-webkit-scrollbar {
  width: 8px;
}

.system-settings-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.system-settings-content::-webkit-scrollbar-thumb {
  background: rgba(0, 195, 255, 0.6);
  border-radius: 4px;
}

.system-settings-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 195, 255, 0.8);
}

.content-header {
  text-align: center;
  margin-bottom: 30px;
}

.content-header h2 {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content-header p {
  color: #7f8c8d;
  font-size: 16px;
  margin: 0;
}

/* 选项卡样式 */
.settings-tabs {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 195, 255, 0.1);
  border: 1px solid rgba(0, 195, 255, 0.3);
}

.settings-tabs :deep(.el-tabs__header) {
  margin-bottom: 20px;
}

.settings-tabs :deep(.el-tabs__nav-wrap::after) {
  background: rgba(0, 195, 255, 0.2);
}

.settings-tabs :deep(.el-tabs__active-bar) {
  background: #00c3ff;
}

.settings-tabs :deep(.el-tabs__item.is-active) {
  color: #00c3ff;
}

/* 设置卡片 */
.settings-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 195, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 195, 255, 0.1);
}

.settings-card :deep(.el-card__header) {
  background: rgba(0, 195, 255, 0.1);
  border-bottom: 1px solid rgba(0, 195, 255, 0.2);
  font-weight: 600;
  color: #2c3e50;
}

/* 表单提示 */
.form-tip {
  margin-left: 10px;
  color: #7f8c8d;
  font-size: 12px;
}

/* 监控区域 */
.monitor-section {
  padding: 20px 0;
}

.monitor-item {
  padding: 20px;
  background: rgba(248, 249, 250, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(0, 195, 255, 0.1);
}

.monitor-item h4 {
  color: #2c3e50;
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 600;
}

.monitor-item .el-progress {
  margin-bottom: 15px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .system-settings-content {
    padding: 15px;
  }
  
  .content-header h2 {
    font-size: 24px;
  }
  
  .settings-tabs {
    padding: 15px;
  }
}
</style>
